<template>
    <!-- 选择车主人弹窗 -->
    <el-dialog width="600px" :visible="visible" @close="handleClose">
        <template #title>
            <div>选择人员</div>
        </template>
        <el-form :model="queryForm" ref="queryFormRef" label-width="80px" size="small">
            <el-row type="flex">
                <el-form-item label="人员姓名" prop="name">
                <el-input placeholder="人员姓名" v-model="queryForm.name"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="handleQuery">查询</el-button>
                <el-button type="plain" @click="resetForm('queryForm'), getCarPersonList()">重置</el-button>
            </el-form-item>
            </el-row>
            
        </el-form>

        <!-- 表格 -->
        <el-table :data="carPersonList">
            <el-table-column type="index" label="序号" align="center" width="50" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="人员名字" align="center" width="250"
                show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" align="center" width="250" show-overflow-tooltip>
                <template #default="{ row }">
                    <el-button type="primary" @click="handleChoose(row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-row type="flex" style="margin-top: 25px;">
            <div class="block">
                <!-- .sync类似v-model，实现页面数据双向响应式 -->
                <el-pagination background :current-page.sync="pageIniation.pageNum" :page-sizes="[5]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageIniation.total" @current-change="getCarPersonList">
                </el-pagination>
            </div>
        </el-row>
    </el-dialog>
</template>

<script>
import { query } from '@/utils/common.js';
import { getPersonInfo } from '@/api/cars.js';

export default {
    name: "",
    //父子组件通信
    props: {
        visible: Boolean,
        choosePerson: {
            type: String,
        }

    },
    data() {
        return {
            plotId: this.$store.state.curId,
            //车主人列表
            carPersonList: [],
            //查询
            queryForm: {
                name: undefined,
            },

            //分页
            pageIniation: {
                pageNum: 1,
                pageSize: 5,
                total: 0,
            },

        }
    },

    computed: {

    },

    created() {
        this.getCarPersonList()
    },

    methods: {
        //获取车主人列表
        getCarPersonList(query = {}) {
            //过滤掉多余的参数
            const { total, ...rest } = this.pageIniation
            getPersonInfo({ ...query, ...rest, plotId: this.plotId }).then(res => {
                this.carPersonList = res.rows
                this.pageIniation.total = res.total
            })

        },

        //查询
        handleQuery() {
            const hasInput = query(this.queryForm)

            if (hasInput) return this.getCarPersonList(this.queryForm)
            //不符合，进行提示
            this.$message.warning("请输入值！")
        },

        //查询后重置
        resetForm(refName) {
            this.$refs[`${refName}Ref`].resetFields()
        },

        //选择
        handleChoose(row) {
            this.$emit('choose', row)
            this.$emit('update:visible', false)
            if (this.choosePerson) return this.$nextTick(() => {
                //进行数据回显，信息显现在编辑表单
                this.queryForm.name = this.choosePerson
            })
        },


        //关闭弹窗
        handleClose() {
            this.$emit('update:visible', false)
        }

    }
}
</script>